//index.js
//获取应用实例
const app = getApp();
const BaseURL = app.globalData.baseURL;

import * as echarts from '../../assets/component/ec-canvas/echarts';

Page({
    data: {
        // 轮播图片设置
        bannerImage: [{
                image: '../../assets/images/content/banner-01.jpg',
                mode: 'widthFix'
            },
            {
                image: '../../assets/images/content/banner-02.jpg',
                mode: 'widthFix'
            },
            {
                image: '../../assets/images/content/banner-03.jpg',
                mode: 'widthFix'
            },
            {
                image: '../../assets/images/content/banner-04.jpg',
                mode: 'widthFix'
            }
        ],
        seriesData: [],
        ec: {
            // onInit: initChart
            lazyLoad: true
        },
        // 轮播器Swiper相关设置
        swiper: {
            indicatorDots: true,
            indicatorColor: 'rgba(188,188,188,0.6)',
            indicatorActiveColor: 'rgba(7,193,96,0.8)',
            vertical: false,
            autoplay: true,
            interval: 3500,
            duration: 500
        },
        // 读书笔记好处的列表
        benefitList: [{
                icon: 'success_no_circle',
                text: '可帮助记忆，解决读后即忘的问题，使得读书效率有效提高。'
            },
            {
                icon: 'success_no_circle',
                text: '可锻炼思考能力。读后有感时将心得记录下来，可锻炼人的思维的条理性、逻辑性、总结能力和综合分析能力。'
            },
            {
                icon: 'success_no_circle',
                text: '可积累有用的材料，开拓视野。这样就能增加沟通交流时的谈资和依据，使说服能力得以提升。'
            },
            {
                icon: 'success_no_circle',
                text: '会产生新的感悟，有利于发现新问题，有助于研究新问题。'
            }
        ],
        bookCount: {
            grow_up: 0,
            technology: 0,
            more: 0
        }
    },

    /**
     * 生命周期：页面加载完成后执行
     */
    onLoad() {
        // 获取ECharts组件所需的容器ID
        this.echartsComponnet = this.selectComponent('#bookStatistics');
    },

    /**
     * 生命周期：页面显示后执行
     */
    onShow() {
        // 获取书籍信息，并在内部完成对图表的始化配置过程
        this.setChartInfo();
    },

    /**
     * 设置图表信息方法
     */
    setChartInfo () {
        // 分别获取“成长类”、“技术类”、“其它类”书籍的数据信息
        Promise.all([
            this.promise_getBookData('grow_up'),
            this.promise_getBookData('technology'),
            this.promise_getBookData('more')
        ]).then(result => {
            // 获取数据返回结果组成的 result 数组
            this.setData({
                // 设置获取到的书籍数量
                bookCount: {
                    grow_up: result[0].length,
                    technology: result[1].length,
                    more: result[2].length
                }
            });
            // 调用获取本地缓存数据并初始化图表的方法
            this.getDataInitCharts();
        });
    },

    /**
     * 通过Promise对象封装调用获取书籍信息数据的请求模版
     * @param { String } databaseName 数据库名称
     */
    promise_getBookData(databaseName) {
        return new Promise((resolve, reject) => {
            this.getBookData({databaseName: databaseName}, function(req) {
                resolve(req.data);
            });
        }).then(result => result);
    },

    /**
     * 获取书籍信息数据的请求模版
     * @param { Object } data 请求发送的数据
     * @param { function } success 请求成功回调
     */
    getBookData (data,success) {
        wx.request({
            url: `${BaseURL}book_info-get.php`, 
            method: 'GET',
            data: data,
            header: {
                'content-type': 'application/json'
            },
            success (res) {
                success(res);
            },
            fail(err) {
                console.error('数据请求失败！');
            }
        });
    },

    /**
     * 获取本地缓存数据并初始化图表的方法
     */
    getDataInitCharts () {
        this.setData({
            seriesData: [
                {
                    value: this.data.bookCount.grow_up,
                    name: '成长类',
                    itemStyle: {
                        normal: {
                            color: '#f88344'
                        }
                    }
                },
                {
                    value: this.data.bookCount.technology,
                    name: '技术类',
                    itemStyle: {
                        normal: {
                            color: '#2397fd'
                        }
                    }
                },
                {
                    value: this.data.bookCount.more,
                    name: '其它类',
                    itemStyle: {
                        normal: {
                            color: '#9b53c4'
                        }
                    }
                }
            ]
        });
        this.initECharts();
    },

    /**
     * 初始化图表
     */
    initECharts () {
        const bookcharts = this.echartsComponnet.init((canvas, width, height) => {
            // 初始化图表
            const Chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            Chart.setOption(this.getOption());

            // 为图表绑定点击事件
            Chart.on('click', function (params) {
                // 根据点击图表内的不同柱状图判断当前数据分类的名称
                // 然后根据这个名称调用微信的页面切换方法跳转到指定页面
                switch(params.name) {
                    case '成长类':
                        wx.switchTab({
                            url: '/pages/grow-up/grow-up'
                        });
                        break;
                    case '技术类':
                        wx.switchTab({
                            url: '/pages/technology/technology'
                        });
                        break;
                    case '其它类':
                        wx.switchTab({
                            url: '/pages/more/more'
                        });
                        break;
                    default:
                        wx.switchTab({
                            url: '/pages/index/index'
                        });
                }
            });

            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return Chart;
        });
    },

    /**
     * 获取图表配置
     */
    getOption () {
        // 指定图表的配置项和数据
        var option = {
            backgroundColor: '#dfddd3',
            title: {
                text: '书籍数量统计',
                textStyle: {
                    color: '#4d2b2f',
                    fontSize: 16
                },
                left: 'center',
                top: 5
            },
            grid: {
                top: 42,
                right: 20,
                bottom: 30,
                left: 30
            },
            xAxis: {
                type: 'category',
                data: ['成长类', '技术类', '其它类']
            },
            yAxis: {
                type: 'value',
                minInterval: 1
            },
            series: [{
                data: this.data.seriesData,
                type: 'bar'
            }]
        }
        return option;
    },
});
